<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>三种创建元素方式区别</title>
</head>
<body>
  <button>点击</button>
  <p>abc</p>
  <div class="inner"></div>
  <div class="create"></div>
  <script>
    // window.onload = function() {
    //         document.write('<div>123</div>')

    //     }
    // 三种创建元素方式区别
    // 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
    // var btn = document.querySelector('button')
    // btn.onclick = function() {
    //     document.write('<div>123</div>')
    // }

    // 2. innerHTML 创建元素
    var inner = document.querySelector('.inner')
    // for (var i = 0; i <= 100; i++) {
    //     inner.innerHTML += '<a href="#">百度</a>'
    // }
    var arr = []
    for (var i = 0; i <= 100; i++) {
      arr.push('<a href="#">百度</a>')
    }
    inner.innerHTML = arr.join('')
    // 3. document.createElement() 创建元素
    var create = document.querySelector('.create')
    for (var i = 0; i <= 100; i++) {
      var a = document.createElement('a')
      create.appendChild(a)
    }
  </script>
</body>
</html>